<template>
	<view class="uy-nav" :class="{'uy-fixed': fixed}" :style="{'background': bgColor, 'z-index': zIndex, 'height': height + 'px'}">
		<view class="uy-base-nav"
			:style="{'background': backgroundColor, 'font-size': fontSize, 'color': color, 'line-height': btnHeight + 'px', 'border': '1rpx solid ' + (border? borderColor: 'transparent'), 'border-radius': borderRadius + 'px', 'margin': `0 ${margin}px 0 ${margin}px`}"
			@tap="$emit('click')" v-if="!flex">
			{{title || ''}}
			<slot />
		</view>
		<view class="uy-base-nav" v-else>
			<view class="">
				<slot name="left" />
			</view>
			<view :style="{'line-height': btnHeight + 'px'}">
				<slot name="right" />
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @description 底部按钮组件
	 * @property {Boolean}	fixed  是否悬浮到底部  默认true
	 * @property {Boolean} flex  是否弹性布局 默认false
	 * @property {String}  title  标题
	 * @property {String} bgColor  自定义背景色  透明色设置transparent
	 * @property {Number} zIndex  自定义层级  fixed为true生效
	 * @property {String}  backgroundColor  自定义按钮背景 透明色设置transparent
	 * @property {String || Number}  fontSize  自定义字体大小
	 * @property {String}  color  自定义字体颜色
	 * @property {String || Numver}  height  自定义外层高度  默认50  单位px
	 * @property {String || Number}  btnHeight  自定义按钮高度  默认44  单位px
	 * @property {Boolean}  border  是否隐藏边框  默认false
	 * @property {String}  borderColor  自定义边框颜色
	 * @property {String}	borderRadius  自定义按钮圆角  默认84  单位px
	 * @property {String || Number} margin  自定义按钮左右间距  默认15  单位px 
	 * @property {Function}  click  按钮点击事件
	 */
	export default {
		name: "uni-base-nav",
		props: {
			fixed: {
				type: Boolean,
				default: true
			},
			flex: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: '#FFFFFF'
			},
			backgroundColor: {
				type: String,
				default: '#FF4E03'
			},
			fontSize: {
				type: [String, Number],
				default: 15
			},
			color: {
				type: String,
				default: '#FFFFFF'
			},
			height: {
				type: [String, Number],
				default: 50
			},
			btnHeight: {
				type: [String, Number],
				default: 44
			},
			border: {
				type: Boolean,
				default: false
			},
			borderColor: {
				type: String,
				default: '#FF4E03'
			},
			borderRadius: {
				type: [String, Number],
				default: '84'
			},
			zIndex: {
				type: Number,
				default: 999
			},
			margin: {
				type: [String, Number],
				default: 15
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.uy-nav {
		width: 100%;
		display: flex;
		/* #ifdef APP-NVUE */
		flex-direction: row;
		/* #endif */
		align-items: center;
		left: 0;
		bottom: var(--window-bottom);
		padding-bottom: constant(safe-area-inset-bottom); /* 兼容IOS 设备 */
		padding-bottom: env(safe-area-inset-bottom); /* 兼容IPhone X 及以上设备 */
	}
	
	.uy-fixed {
		position: fixed;
	}
	
	.uy-base-nav {
		width: 100%;
		text-align: center;
		position: relative;
		justify-content: space-between;
	}
</style>